<template>
  <div class="goods">
    <header class="page-header">商品管理

    </header>

    <!-- 新增货物 -->
    <div class="btn-group">
      <el-popover
        @hide="resetGoodsInfo"
        placement="top-start"
        :title="'新增商品'"
        width="400"
        trigger="click"
        v-model="create_goods_visible">
        <el-form :inline="true" class="create-table">
          <el-form-item label="货物名">
            <el-input v-model="goodsInfo.name" placeholder="货物名"></el-input>
          </el-form-item>
          <el-form-item label="简写">
            <el-input v-model="goodsInfo.shortname" placeholder="货物简写"></el-input>
          </el-form-item>
          <el-form-item label="批发价">
            <el-input v-model="goodsInfo.price" placeholder="批发价"></el-input>
          </el-form-item>
          <el-form-item label="零售价">
            <el-input v-model="goodsInfo.pricesing" placeholder="零售价"></el-input>
          </el-form-item>
          <el-form-item label="类别">
            <el-select v-model="goodsInfo.contentid" placeholder="选择类别">
              <el-option v-for="item in goods_types" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="等级">
            <el-select v-model="goodsInfo.level" placeholder="选择等级">
              <el-option v-for="item in goods_level" :key="item.id" :label="item.label" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="goodsInfo.remark" placeholder="描述"></el-input>
          </el-form-item>
          <div class="btn-group" style="text-align: center">
            <el-button type="success" @click="confirmCreate">确认增加</el-button>
          </div>
        </el-form>
        <el-button type="primary" class="sing-btn" slot="reference">新增商品</el-button>
      </el-popover>
      <el-button type="primary" class="sing-btn" @click="newGoods">批量上传</el-button>
    </div>



    <!-- 查询货物 -->
    <el-form :inline="true" class="goodsSearch">
      <el-form-item label="名称">
        <el-input v-model="goodsSearch.name" placeholder="货物名/简写/货物编号"></el-input>
      </el-form-item>
      <el-form-item label="类别">
        <el-select v-model="goodsSearch.contentid" @change="goodsSearchHandle" placeholder="选择类别">
          <el-option label="全部" :value="0"></el-option>
          <el-option v-for="item in goods_types" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="goodsSearchHandle">查询</el-button>
        <el-button type="info" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 货物列表 -->
      <el-table :data="goods_list" border style="width: 100%">
        <el-table-column fixed prop="name" label="商品名"></el-table-column>
        <el-table-column fixed prop="shortname" label="商品简写"></el-table-column>
        <el-table-column label="商品类别">
          <template slot-scope="scope">
            <span>{{type_label(scope.row.contentid)}}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="goods_num" label="商品库存"> </el-table-column> -->
        <el-table-column label="批发价">
          <template slot-scope="scope">
            <span>{{scope.row.price}}</span>
          </template>
        </el-table-column>
        <el-table-column label="零售价">
          <template slot-scope="scope">
            <span>{{scope.row.priceing || 0}}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品级别">
          <template slot-scope="scope">
            <span>{{level_label(scope.row.level)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品状态">
          <template slot-scope="scope">
            <span>{{scope.row.isdel ? '下架' : '上架'}}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="300">
          <template slot-scope="scope">
            <el-popover
              @hide="resetGoodsInfo"
              placement="top-start"
              :title="'修改商品（'+ scope.row.name +')'"
              width="400"
              trigger="click">
              <el-form :inline="true" class="create-table">
                <el-form-item label="批发价">
                  <el-input v-model="goods_modify.price" placeholder="输入新的批发价"></el-input>
                </el-form-item>
                <el-form-item label="单价">
                  <el-input v-model="goods_modify.pricesing" placeholder="输入新的单价"></el-input>
                </el-form-item>
                <el-form-item label="等级">
                  <el-select v-model="goods_modify.level" placeholder="选择等级">
                    <el-option v-for="item in goods_level" :key="item.id" :label="item.label" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="success"  @click="confirm_modify(scope.row.id)">确认</el-button>
                </el-form-item>
              </el-form>
              <el-button type="text" size="small" slot="reference" @click="goods_detail_fo(scope.row.id)">编辑商品</el-button>
            </el-popover>
            <el-button type="text" size="small" @click="change_up(scope.row.id, parseInt(scope.row.isdel) ? 0 : 1)">{{scope.row.isdel ? '设为上架' : '设为下架'}}</el-button>
          </template>
        </el-table-column>
      </el-table>


<!-- 分页 -->
      <el-pagination class="page-pagination"
        background
        layout="prev, pager, next"
        :page-size="this.goodsSearch.page_size"
        @current-change="current_change"
        :total="total">
      </el-pagination>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "order",
  data() {
    return {
      count : 1,
      create_goods_visible: false,
      goods_up: [{ label: "上架", id: 0 }, { label: "下架", id: 1 }],
      goods_level:[
        {label: '低', id: 0},
        {label: '高', id: 1},
        {label: '很高', id : 2}
      ],
      goodsSearch: {
        name: '',
        contentid: 0,
        current_page: 1,
        page_size: 10
      },
      goodsInfo: {
        name: '',
        shortname: '',
        contentid: '',
        price: '',
        remark: ''
      },
    };
  },
  computed: {
    ...mapGetters({
      goods_list: "goods/goods_list",
      total: "goods/total",
      goods_types: 'goods/goods_types',
      goods_modify: 'goods/goods_detail'
    })
  },
  methods: {
    confirmCreate() {
      this.$store.dispatch("goods/create_goods", this.goodsInfo);
    },
    goodsSearchHandle() {
      this.goodsSearch.current_page = 1
      this.$store.dispatch("goods/get_goods_list", this.goodsSearch);
    },
    goods_detail_fo(id) {
      this.$store.dispatch('goods/goods_detail', {id: id})
    },
    reset() {
      this.goodsSearch = {
        name: "",
        contentid: 0,
        current_page: 1,
        page_size: 10
      }
      this.$store.dispatch("goods/get_goods_list", this.goodsSearch);
    },
    current_change(current) {
      this.goodsSearch.current_page = current;
      this.$store.dispatch("goods/get_goods_list", this.goodsSearch);
    },
    confirm_modify(id) {
      console.log(this.goods_modify)
      this.$store.dispatch("goods/modify_goods", {
        modify: this.goods_modify,
        goods_search: this.goodsSearch
      });
    },
    change_up(id, up) {
      this.$store.dispatch("goods/del_product", {
        modify: {
          id: id,
          isdel: parseInt(up)
        },
        goods_search: this.goodsSearch
      });
    },
    set_recommend(id, isrecommend) {
      this.$store.dispatch('goods/set_recommend', {
        id: id,
        isrecommend: isrecommend
      })
    },
    resetGoodsInfo() {
      this.goodsInfo = {
        name: '',
        shortname: '',
        contentid: '',
        price: '',
        remark: ''
      }
    },

    type_label(type) {
      for(var i = 0; i < this.goods_types.length; i++){
        if(this.goods_types[i].id == type) {
          return this.goods_types[i] && this.goods_types[i].name
          break
        }
      }      
    },
    level_label(type) {
      return this.goods_level.filter(col => col.id == type)[0].label;
    },
    newGoods() {}
  },
  created() {
    this.$store.commit("goods/SET_VM", { vm: this })
    this.$store.dispatch("goods/get_goods_list", this.goodsSearch)
    this.$store.dispatch('goods/query_content')
  },
  
};
</script>

<style lang="scss">
.goods {
  .goodsSearch {
    margin: 20px auto;
    text-align: center;
  }
  .btn-group {
    margin-top: 20px;
    text-align: center;
  }
  
}
.create-table{
  label.el-form-item__label{
    width: 80px!important;
  }
  input{
    width: 200px!important;
  }
}

</style>


